<template>
  <div class="tag_back">
    <div class="flex_bet">
      <div class="tag_background tag_left">
        <div class="colBlueTag pt20 pl30 ft20">
          <div class="font_weight">大数据分析模型</div>
          <div class="tag_list ft16">
            <div v-for="item in dataList" :key="item.code" @click="getDataId(item.code)">{{ item.btn }}</div>
            <!-- <div>作物识别</div>
            <div>面积提取</div>
            <div>作物长势检测</div>
            <div>产量估计</div>
            <div>病虫害监测预警</div>
            <div>测土配方</div>
            <div>灾损分析</div>
            <div>气象灾害预警</div>
            <div>非粮化检测</div>
            <div>采摘期预测</div> -->
          </div>
        </div>
      </div>
      <div class="tag_background tag_right ml15">
        <div class="colBlueTag pt20 pl30 ft20">
          <div class="font_weight">智能决策与管理</div>
          <div class="tag_list ft16">
            <div v-for="item in makingList" :key="item.code" @click="getDataId(item.code)">{{ item.btn }}</div>
            <!-- <div>智慧灌溉</div>
            <div>精准施药</div>
            <div>自动遮荫</div>
            <div>采摘机器人</div>
            <div>绿色防控装置</div>
            <div>激光生长调控灯</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { EventBus } from '@/utils/eventbus' // 引入事件中心
import { getDataApi, getDataIDApi } from '@/api/user'

export default {
  name: 'BottomLine',
  data() {
    return {
      // 智能决策与管理
      makingList: [
        { btn: '智慧灌溉', code: 'ZNGG' },
        { btn: '精准施药', code: 'JZSY' },
        { btn: '精准施肥', code: 'JZSF' },
        { btn: '自动遮荫', code: 'ZDZY' },
        { btn: '激光生长调控灯', code: 'JGSZTSD' },
        { btn: '绿色防控装置', code: 'LSFKZZ' },
        { btn: '采摘机器人', code: 'CZJQR' }
      ],
      // 大数据分析模型
      dataList: [
        { btn: '作物识别', code: 'ZWSB' },
        { btn: '面积提取', code: 'MJTQ' },
        { btn: '作物长势监测', code: 'ZSJC' },
        { btn: '产量估计', code: 'ZLGJ' },
        { btn: '病虫害监测预警', code: 'BCHJCYJ' },
        { btn: '气象灾害预警', code: 'QXZHJCYJ' },
        { btn: '测土配方', code: 'CTPF' },
        { btn: '采摘期/  收获期预测', code: 'CZQ/SSQYC' },
        { btn: '灾损分析', code: 'ZHPG' },
        { btn: '非粮化监测', code: 'FLHJC' }
      ]
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.tag_back {
  height: 58px;
  position: absolute;
  bottom: calc(148px + 7px);
  left: 390px;
  .tag_left {
    width: 696px;
    height: 148px;
    background: #01233760
  }
  .tag_right {
    width: 446px;
    height: 148px;
    background: #01233760
  }
  .tag_list {
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    > div {
      padding:0 10px;
      height: 34px;
      line-height: 34px;
      background: rgba(18,112,112,0.3);
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #08FFFF;
      margin-right: 15px;
      margin-top: 10px
    }
  }
}
</style>
